<template>
    <div class="default-main ba-table-box">
        <Header>
            <template v-slot:tableHeaderSearch>
                <slot name="tableSearch"></slot>
            </template>
        </Header>
        <el-table
        ref="tableRef"
        class="ba-data-table w100"
        header-cell-class-name="table-header-cell"
        v-bind="$attrs">
            <template v-for="(item, key) in baTable.table.column">
                <template v-if="item.show">
                    <!-- 渲染为 slot -->
                    <Column  v-if="item.slotName" :attr="item" :key="key + '-columnSlot'">
                        <template #header>
                        </template>
                        <template #default="scope">
                            <slot :name="item.slotName" :data="scope"></slot>
                        </template>
                    </Column>
                    <!-- Column 组件内部是 el-table-column -->
                    <Column v-else :attr="item" :key="key + '-column'"></Column>
                </template>
            </template>
        </el-table>

        <div v-if="baTable.table.pagination" class="table-pagination">
            <el-pagination
                :currentPage="baTable.table.pagination?.currentPage"
                :page-size="baTable.table.pagination?.pageSize"
                :page-sizes="baTable.table.pagination?.pageSizes"
                background
                :layout="baTable.table.pagination?.layout"
                :total="baTable.table.pagination?.total"
                @size-change="baTable.table.pagination?.onTableSizeChange"
                @current-change="baTable.table.pagination?.onTableCurrentChange"
            ></el-pagination>
        </div>
        <slot name="footer"></slot>
    </div>
</template>



<script setup lang="ts">
import { computed, provide } from 'vue'
import type { ElTable, TableInstance } from 'element-plus'
import Header from '/@/components/tableNew/header/index.vue'
import Column from '/@/components/tableNew/column/index.vue'
import baTableClass from '/@/utils/baTableNew'
//设置默认值
// const props = withDefaults(defineProps<BaTableNew>(),{})

interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
        // 表格加载状态
        loading?: boolean,
        // 表格列定义
        column: TableNewColumn[],
        //表格上是否显示公用查询
        showComSearch?: boolean,
        //表格上的按钮组
        tableButtons?:TableButton[],
         //分页属性
        pagination?: TablePagination | undefined
}
const props = withDefaults(defineProps<Props>(), {
    loading: false,
    column:()=>[],
    showComSearch:false,
    tableButtons:()=>[],
})

// const props = defineProps<{
//         // 表格加载状态
//         loading?: boolean,
//         // 表格列定义
//         column: TableNewColumn[],
//         //是否开启分页
//         isPagination?: boolean,
//         //表格上是否显示公用查询
//         showComSearch?: boolean,
//         //表格上的按钮组
//         tableButtons?:TableButton[],
//          //分页属性
//         pagination?: TablePagination
// }>();

const baTable = new baTableClass(props, props.pagination);
provide('tableData', baTable)
</script>


<style scoped lang="scss">
.ba-data-table :deep(.el-button + .el-button) {
    margin-left: 6px;
}
.ba-data-table :deep(.table-header-cell) .cell {
    color: var(--el-text-color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table-pagination {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    padding: 13px 15px;
}
</style>
